<template>
    <my-dialog :visible.sync="show" :append-to-body="appendToBody" @close="cancel" :showClose="showClose">
        <div class="ff-dialog-content-body">
            <h3 v-html="title"></h3>
            <div class="ff-dialog-content-html" v-html="content"></div>
            <div class="ff-dialog-content-tip" v-if="tip">{{tip}}</div>
            <button class="ff-common-btn" @click="cancel" :class="cancelClass" v-if="showCancel">{{cancelName}}</button>
            <button class="ff-common-btn ff-common-btn-confirm" @click="confirm" :class="confirmClass">{{confirmName}}</button>
        </div>
    </my-dialog>
</template>

<script>
    import myDialog from '@/components/dialog/dialog.vue'
    export default {
        props: {
            /*控制弹框显示*/
            visible: {
                type: Boolean,
                default: false
            },
            /*提示内容*/
            content: {
                type: String,
                default: ''
            },
            /* 提示内容 */
            tip: {
                type: String,
                default: ''
            },
            /*标题*/
            title: {
                type: String,
                default: '是否删除该款'
            },
            /*是否放在body中*/
            appendToBody: {
                type: Boolean,
                default: true
            },
            /*是否显示关闭icon*/
            showClose: {
                type: Boolean,
                default: true
            },
            /*取消按钮名*/
            cancelName: {
                type: String,
                default: '取消'
            },
            /*确认按钮名*/
            confirmName: {
                type: String,
                default: '确认'
            },
            /*取消按钮样式*/
            cancelClass: {
                type: String,
                default: ''
            },
            /*确定按钮样式*/
            confirmClass: {
                type: String,
                default: ''
            },
            /*是否显示取消按钮*/
            showCancel: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {

            }
        },
        computed: {
            show: {
                get () {
                    return this.visible;
                },
                set (val) {
                    this.$emit('update:visible', val);
                }
            },
        },
        methods: {
            /*取消*/
            cancel () {
                this.show = false;
                this.$emit('cancel');
            },
            /*确认*/
            confirm () {
                this.show = false;
                this.$emit('confirm');
            }
        },
        components: {
            myDialog
        },
    }
</script>

<style type="text/less" lang="less">
    .ff-dialog-content-body {
        text-align: center;
        width: 340px;
        h3 {
            color: #666;
            font-size: 18px;
            font-weight: bold;
            line-height: 25px;
            padding: 15px 0;
            margin: 20px 0 0;
            word-wrap: break-word;
            word-break: break-all;
        }
        .ff-dialog-content-html {
            width: 285px;
            font-size: 14px;
            line-height: 25px;
            //min-height: 20px;
            margin: 0 auto 26px;
            word-wrap: break-word;
            word-break: normal;
            color: #666;
        }
        .ff-dialog-content-tip {
            font-size: 12px;
            margin-bottom: 15px;
            color: #fd6442;
            text-align: center;
        }
    }
</style>
